<template>
    <div>
        <h2>核酸记录</h2>

        <el-row class="mt10">
            <el-col :span="8">
                 <el-input v-model="obj.keyword" placeholder="请输入搜索关键字" />
            </el-col>
            <el-col :span="7" :offset="1">
                <el-select  v-model="obj.role" class="m-2" style="width:100%" placeholder="请选择角色" >
                    <el-option 
                        v-for="(l,i) in roleList"
                        :key="i"
                        :label="l.label"
                        :value="l.value"
                    />
                </el-select>
            </el-col>
            <el-col :span="7" :offset="1">
                <el-button type="success" @click="todoSearch">点击搜索</el-button>
            </el-col>
        </el-row>
        <el-row class="mt10">
            <el-table class="mt10" :data="userList" style="width: 100%" border>
                <el-table-column type="index" label="序号" center ></el-table-column>
                <el-table-column label="用户名称">
                    <template #default="scope">
                        {{scope.row.username}}
                    </template>
                </el-table-column>
                <el-table-column label="手机号码">
                    <template #default="scope">
                        <!-- {{scope.row.phone | telformat}} -->
                        {{$filters.telformat(scope.row.phone,"-")}}
                    </template>
                </el-table-column>
                <el-table-column label="头像">
                    <template #default="scope">
                        <el-avatar
                            v-if="scope.row.avatar"
                            :src="scope.row.avatar.replace(/public/,baseURL)"
                        />
                         <el-avatar v-else  :src="circleUrl" />
                    </template>
                </el-table-column>
                <el-table-column label="体温提交时间">
                    <template #default="scope">
                        <span v-if="scope.row.time">
                            <!-- {{scope.row.time }} -->
                             {{$filters.timeFormat(scope.row.time)}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="角色">
                    <template #default="scope">
                        <el-tag :color="roleList.find(item=>item.value==scope.row.role).color">
                            {{roleList.find(item=>item.value==scope.row.role).label}}
                        </el-tag>
                    </template>
                </el-table-column>
                 <el-table-column label="体温">
                    <template #default="scope">
                        {{scope.row.age}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template #default="scope" v-if="userInfo" >
                        <div v-if="userInfo.role>scope.row.role">
                             <el-popconfirm
                                confirm-button-text="确定"
                                cancel-button-text="不,谢谢"
                                :icon="InfoFilled"
                                icon-color="red"
                                title="你真的要删除这个意见吗?"
                                @confirm="confirmDelelte(scope.row._id)"
                            >
                                <template #reference>
                                    <el-button type="danger" :icon="DeleteFilled" circle  class="ml10"/>
                                </template>
                            </el-popconfirm>
                            
                            <el-button type="success"  @click="showUpdateDialog(scope.row)" :icon="Edit" circle  class="ml10"/>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-dialog
            v-model="updateVisible"
            title="修改用户信息"
            width="30%"
            :before-close="updateClose"
        >
            <el-form
                label-position="top"
                label-width="100px"
                :model="uform"
                class="myform"
                ref="updateform"
                :rules="rules"
            >   
                <el-form-item 
                    label="姓名" 
                    prop="username"
                >
                    <el-input clearable v-model="uform.username"  :prefix-icon="User" placeholder="请输入用户名"/>
                </el-form-item>
                <el-form-item
                    prop="phone"
                    label="手机号码"
                >
                    <el-col :span="24">
                        <el-input v-model="uform.phone" placeholder='请输入手机号码' clearable :prefix-icon="Iphone" > </el-input>
                    </el-col>
                </el-form-item>
                <el-form-item
                    prop="role"
                    label="用户角色"
                >
                    <el-col :span="24">
                        <el-select v-if="userInfo" v-model="uform.role" class="m-2" style="width:100%" placeholder="请设置用户角色" >
                            <el-option 
                                v-for="(l,i) in roleList"
                                :key="i"
                                :label="l.label"
                                :value="l.value"
                                :disabled="userInfo.role<l.value"
                            />
                        </el-select>
                    </el-col>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="updateClose">取消</el-button>
                    <el-button type="warning" @click="submitUpdateForm"
                    >修改</el-button
                    >
                </span>
            </template>
        </el-dialog>
    </div>
</template>


<script>
import { onMounted, reactive, toRefs ,ref } from '@vue/runtime-core'
import { useStore } from 'vuex'
import {DeleteFilled,Lock,User,Edit,InfoFilled,Iphone} from '@element-plus/icons-vue'
import {ajax} from "@/api"
import { ElMessage } from 'element-plus'
import moment from "moment"
export default {
    // filters:{
    //     timeFormat(value,str){
    //         if(!value) return value;
    //         str = str || 'YYYY-MM-DD'
    //         console.log(value)
    //         return moment(value).format(str)
    //     },
    //     telformat(value,str){
    //         if(!value) return '';
    //         str = str || '-';
    //         value = value.toString().split("");
    //         console.log(value)
    //         value.splice(3,0,str);
    //         value.splice(8,0,str);
    //         return 12344567
    //     }
    // },
    setup(props){
        const updateform = ref()
        const store = useStore()
        const state = reactive({
            DeleteFilled,
            Edit,
            InfoFilled,
            Iphone,
            User,
            Lock,
            updateVisible:false,
            uform:{},
            obj:{}
        })
        onMounted(()=>{
            getUserInfo()
            store.dispatch("getUserListAsync")
        })
        const confirmDelelte = async  (_id)=>{
            let {code,result} = await ajax.userremove({_id})
            if(code==200){
                // 删除 
                // store.dispatch("getUserListAsync") 
                var list = store.state.userList.filter(item=>item._id!=_id);
                store.commit("getuserlist",list);
            }
        }
        const updateClose = ()=>{
            state.updateVisible = false;
            state.uform = {}
        }
        const submitUpdateForm =  ()=>{
            updateform.value.validate(async (valid)=>{
                if(valid){
                    let {code,result} = await ajax.userupdate(state.uform)
                    if(code==200){
                        // store.dispatch("getUserListAsync") 
                        // 替换数据 splice 
                        var list = store.state.userList.map((item)=>{
                            if(item._id==state.uform._id){
                                item = {...item,...state.uform}
                            }
                            return item;
                        })
                        store.commit("getuserlist",list);
                    }
                    state.updateVisible = false;
                    state.uform = {}
                }else{
                    ElMessage.error("请输入有效的修改数据信息")
                }
            })
        }
        const getUserInfo = async ()=>{
            let res= await ajax.getUserInfo()
            store.commit('changeUserInfo',res.result)
        }
        const showUpdateDialog = (item)=>{
            state.updateVisible = true;
            state.uform = {...item}
        }
        const todoSearch = ()=>{
            store.dispatch('getUserListAsync',state.obj)
        }
        return  {
            ...toRefs(state),
            confirmDelelte,
            updateform,
            updateClose,
            submitUpdateForm,
            showUpdateDialog,
            todoSearch
        }
    }
}
</script>

